<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="'\u4f60\u597d'">Insert title here</title>

<link rel="stylesheet" href="css/1140.css" th:href="@{/css/1140.css}" type="text/css" media="screen" />
	
<link rel="stylesheet" href="css/normalize.css" th:href="@{/css/normalize.css}"/>
<link rel="stylesheet" href="css/main.css" th:href="@{/css/main.css}"/>
<link rel="stylesheet" href="css/css.css" th:href="@{/css/css.css}"/>
<link rel="stylesheet" href="css/jquery.dataTables_themeroller.css" th:href="@{/css/jquery.dataTables_themeroller.css}"/>
    
<script src="js/vendor/modernizr-2.6.2.min.js" th:src="@{/js/vendor/modernizr-2.6.2.min.js}"></script>
<script src="js/vendor/css3-mediaqueries.js" th:src="@{/js/vendor/css3-mediaqueries.js}"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
<script th:inline="javascript">/*<![CDATA[*/
window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
		+'"><\/script>')
/*]]>*/</script>
<script src="js/vendor/jquery.dataTables.min.js" th:src="@{/js/vendor/jquery.dataTables.min.js}"></script>
<script src="js/plugins.js" th:src="@{/js/plugins.js}"></script>
<script src="js/main.js" th:src="@{/js/main.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(function(){
	var datatable = $('#datatable').dataTable({
		sAjaxSource: /*[[@{/admin/person/p}]]*/'admin/person/p'
		, sDom: '<rltip>'
		, sPaginationType: 'full_numbers'
		, sServerMethod: 'POST'
		, bServerSide: true
		, aoColumns: [
			{mData: 'username', sTitle: 'username'}
			, {mData: 'firstName', sTitle: 'firstname'}
			, {mData: 'lastName', sTitle: 'lastname'}
			, {mData: 'mobile', sTitle: 'mobile', mRender: function(data, type, full){
				var isV = full.mobileVerified;
				if(isV){
					return '<font color="green">'+data+'</font>';
				} else {
					return '<font color="red">'+data+'</font>';
				}
			}}
			, {mData: 'email', sTitle: 'email', mRender: function(data, type, full){
				var isV = full.emailVerified;
				if(isV){
					return '<font color="green">'+data+'</font>';
				} else {
					return '<font color="red">'+data+'</font>';
				}
			}}
			, {mData: 'totalBalance', sTitle: 'balance'}
			, {mData: 'totalCommission', sTitle: 'commission'}
			, {mData: 'unReturnedCommission', sTitle: 'unreturned commission'}
			, {mData: 'credit', sTitle: 'credit'}
          ]
		, fnServerParams: function ( aoData ) {
			aoData.push(
					{name: 'username', value: $('#username').val()}
					, {name: 'email', value: $('#email').val()}
					, {name: 'lastName', value: $('#lastName').val()}
					, {name: 'firstName', value: $('#firstName').val()}
					, {name: 'mobile', value: $('#mobile').val()}
					);
		}
	});
	
	$('#search-btn').click(function(){
		datatable.fnPageChange(0);
	});
});
/*]]>*/
</script>
</head>
<body>
<div class="grid">
	<div class="row">
		<ul id="search-ul">
			<li>
				<label for="username">username: </label>
				<input id="username" style="width: 120px;"/>
			</li>
			<li>
				<label for="email">Email: </label>
				<input id="email" style="width: 120px;"/>
			</li>
			<li>
				<label for="lastName">firstname: </label>
				<input id="lastName" style="width: 120px;" />
			</li>
			<li>
				<label for="firstName">lastname: </label>
				<input id="firstName" style="width: 120px;" />
			</li>
			<li>
				<label for="mobile">mobile: </label>
				<input id="mobile" style="width: 120px;" />
			</li>
			<li>
				<button id="search-btn">search</button>
			</li>
		</ul>
	</div>
	<div class="row">
		<table id="datatable"></table>
	</div>
</div>
</body>
</html>